<script setup lang="ts">
import { onMounted, Ref, ref, watch, shallowRef, computed, nextTick } from 'vue'
import { Message, Modal, Notification, Spin, Divider, Image } from '@arco-design/web-vue'
import {
  IconFullscreen,
  IconFullscreenExit,
  IconClockCircle,
  IconUser,
  IconCalendar,
  IconEdit,
  IconFile,
  IconAttachment,
  IconPlus,
  IconEye,
  IconDownload,
  IconDelete,
  IconMessage,
  IconHistory,
  IconFaceSmileFill,
  IconAt,
  IconCheck,
  IconClose,
  IconCheckCircleFill
} from '@arco-design/web-vue/es/icon'
import { PRIORITY_CONFIG, getTaskPriorityColor, getPriorityLabel } from '@/constants/Priority'
import {
  COMPLETE_STATUS_CONFIG,
  getCompleteStatus,
  getCompleteColor,
  getCompleteIcon
} from '@/constants/CompleteStatus'
import dayjs from 'dayjs'
import {
  getTaskDetailUsingGet,
  updateTaskUsingPut,
  pageTaskDynamicsUsingPost
} from '@/api/taskController'
import { addTaskCommentUsingPost, pageTaskCommentUsingPost } from '@/api/taskCommentsController'
import { deleteTaskCommentUsingDelete } from '@/api/taskCommentsController'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig, IDomEditor } from '@wangeditor/editor'
import { editorConfig, editorStyle } from '@/composables/useEditorConfig'
import {
  getMembersUsingGet,
  getProjectByTaskIdUsingGet,
  getProjectUsingGet
} from '@/api/projectController'
import { getMilestoneUsingGet } from '@/api/milestoneController'
import { getIterationUsingGet } from '@/api/iterationController'
import { getRequirementUsingGet } from '@/api/requirementController'
import {
  addAttacheUsingPost,
  deleteAttacheUsingDelete,
  pageAttachesUsingPost
} from '@/api/attacheController'
import { uploadFileUsingPost } from '@/api/fileController'
import { getFileIcon, formatFileSize, getFileType, downloadFile, isImageFile } from '@/utils/file'
import { useFilePreview } from '@/composables/useFilePreview'
// 附件预览 （composiables 代码复用）
const { previewVisible, previewFile, handlePreview, closePreview } = useFilePreview()
//emoji
import '@/composables/emojiConfig'
import { emojiIndex, Picker } from '@/composables/emojiConfig'
import { useUserStore } from '@/store/index'
const userStore = useUserStore()

defineOptions({
  name: 'TaskView'
})
// Props定义
const props = defineProps<{
  visible: boolean
  taskId: number | null
}>()

// Emits定义
const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
  (e: 'close', taskId: number): void
}>()
//全屏控制
const fullscreen = ref(false)
// 任务数据
const task = ref<API.TaskVo>({})

// #region 编辑任务内容
const updateTaskRequest: Ref<API.UpdateTaskRequest> = ref({
  id: (props.taskId as number) || undefined,
  proId: (task.value.proId as number) || undefined,
  iterId: (task.value.iterId as number) || undefined,
  mileId: (task.value.mileId as number) || undefined,
  reqId: (task.value.reqId as number) || undefined,
  title: '',
  description: '',
  remark: '',
  status: 0,
  priority: 0,
  startTime: '',
  endTime: ''
})
// 添加标题编辑相关的状态和方法
const isEditingTitle = ref(false)
const editedTitle = ref('')

// 开始编辑标题
const startEditTitle = () => {
  editedTitle.value = task.value?.title || ''
  isEditingTitle.value = true
}

// 保存标题
const handleTitleChange = async () => {
  if (!editedTitle.value.trim()) {
    Message.warning('标题不能为空')
    editedTitle.value = task.value?.title || ''
    return
  }

  // 重置更新请求对象,只保留必要参数
  updateTaskRequest.value = {
    id: task.value.id, // 保留任务ID
    title: editedTitle.value, // 只设置要更新的标题
    mileId: -1,
    iterId: -1,
    reqId: -1
  }

  try {
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
    editedTitle.value = task.value?.title || ''
  } finally {
    isEditingTitle.value = false
  }
}

const initTaskUpdateReuqest = () => {
  // 更新updateTaskRequest
  updateTaskRequest.value = {
    id: task.value.id,
    title: task.value.title,
    description: task.value.description,
    remark: task.value.remark,
    status: Number(task.value.status),
    priority: Number(task.value.priority),
    startTime: task.value.startTime,
    endTime: task.value.endTime,
    proId: -1,
    iterId: -1,
    mileId: -1
  }
}

// 编辑器实例
const descriptionEditor = shallowRef()

// 添加描述编辑状态和临时内容
const isEditingDescription = ref(false)
const tempDescription = ref('')

// 开始编辑描述
const startEditDescription = () => {
  tempDescription.value = task.value.description || ''
  isEditingDescription.value = true
}

// 取消编辑描述
const cancelEditDescription = () => {
  isEditingDescription.value = false
  tempDescription.value = ''
}

// 保存描述
const saveDescription = async () => {
  // 重置更新请求对象,只保留必要参数
  updateTaskRequest.value = {
    id: task.value.id, // 保留任务ID
    description: tempDescription.value, // 只设置要更新的描述
    mileId: -1,
    iterId: -1,
    reqId: -1
  }

  try {
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  } finally {
    isEditingDescription.value = false
    cancelEditDescription()
  }
}
// 添加备注相关的状态控制
const isEditingRemark = ref(false)
const isRemarkFullscreen = ref(false)
const tempRemark = ref('')
const remarkEditor = shallowRef()

// 备注编辑相关方法
const startEditRemark = () => {
  tempRemark.value = task.value.remark || ''
  isEditingRemark.value = true
}

const cancelEditRemark = () => {
  isEditingRemark.value = false
  tempRemark.value = ''
}

const saveRemark = async () => {
  // 重置更新请求对象,只保留必要参数
  updateTaskRequest.value = {
    id: task.value.id, // 保留任务ID
    remark: tempRemark.value, // 只设置要更新的备注
    mileId: -1,
    iterId: -1,
    reqId: -1
  }

  try {
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  } finally {
    isEditingRemark.value = false
    cancelEditRemark()
  }
}
// #endregion
// #region 全屏相关
// 添加描述全屏状态控制
const isDescriptionFullscreen = ref(false)

// 切换描述全屏状态
const toggleDescriptionFullscreen = () => {
  isDescriptionFullscreen.value = !isDescriptionFullscreen.value
}

// 备注全屏控制
const toggleRemarkFullscreen = () => {
  isRemarkFullscreen.value = !isRemarkFullscreen.value
}

//项目成员列表
const projectMembers = ref<API.UserVO[]>([])
const getProjectMembers = async () => {
  const res: any = await getMembersUsingGet({ id: task.value.proId })
  if (res.code === 0) {
    projectMembers.value = res.data
  } else {
    Message.error(res.message)
  }
}
// #region 关联项目、里程碑、迭代、需求
//获取关联项目
const relatePro = ref<API.ProjectVo>({})
const getRelatePro = async () => {
  const res: any = await getProjectUsingGet({ id: task.value.proId })
  if (res.code === 0) {
    relatePro.value = res.data
    useableRelateMilestones.value = relatePro.value?.mileStoneVoList || []
  } else {
    Message.error(res.message)
  }
}
//获取关联里程碑
const relateMile = ref<API.MileStoneVo>({})
const getRelateMile = async () => {
  if (!task.value.mileId) return
  const res: any = await getMilestoneUsingGet({ id: task.value.mileId })
  if (res.code === 0) {
    relateMile.value = res.data
    useableRelateIterations.value = relateMile.value?.iterationVoList || []
  } else {
    Message.error(res.message)
  }
}
//获取关联迭代
const relateIter = ref<API.IterationVo>({})
const getRelateIter = async () => {
  if (!task.value.iterId) return
  const res: any = await getIterationUsingGet({ id: task.value.iterId })
  if (res.code === 0) {
    relateIter.value = res.data
    // 更新可用需求列表
    useableRelateRequirements.value = relateIter.value?.requirementVoList || []
    // 设置当前选中的需求
    relateRequirementId.value = task.value.reqId == -1 ? null : task.value.reqId
  } else {
    Message.error(res.message)
  }
}
//获取关联需求
const relateReq = ref<API.RequirementVo>({})
const getRelateReq = async () => {
  if (!task.value.reqId) return
  const res: any = await getRequirementUsingGet({ id: task.value.reqId })
  if (res.code === 0) {
    relateReq.value = res.data
  } else {
    Message.error(res.message)
  }
}
//实现关联里程碑、迭代、需求修改逻辑(getTaskData执行后赋予初值)
const relateMilestoneId = ref<number | null>(null)
const relateIterationId = ref<number | null>(null)
const relateRequirementId = ref<number | null>(null)
const useableRelateMilestones = ref<API.MileStoneVo[]>([])
const useableRelateIterations = ref<API.IterationVo[]>([])
const useableRelateRequirements = ref<API.RequirementVo[]>([])
watch(relateMilestoneId, (newRelateMilestoneId) => {
  if (newRelateMilestoneId == null) {
    relateIterationId.value = null
    relateRequirementId.value = null
    useableRelateIterations.value = []
    useableRelateRequirements.value = []
    return // 提前返回，避免后续操作
  }

  // 确保 relatePro.value 和 mileStoneVoList 存在
  if (relatePro.value?.mileStoneVoList) {
    // 获取可用的里程碑列表
    useableRelateMilestones.value = relatePro.value.mileStoneVoList || []

    // 获取当前里程碑
    const currentMilestone = useableRelateMilestones.value.find(
      (milestone) => milestone.id === newRelateMilestoneId
    )

    // 获取可用的迭代列表
    useableRelateIterations.value = currentMilestone?.iterationVoList || []
    // 如果有可用的迭代，设置第一个为默认值
    if (useableRelateIterations.value.length > 0) {
      relateIterationId.value = useableRelateIterations.value[0].id as number

      // 获取第一个迭代的需求列表
      const firstIteration = useableRelateIterations.value[0]
      useableRelateRequirements.value = firstIteration?.requirementVoList || []

      // 如果有可用的需求，设置第一个为默认值
      if (useableRelateRequirements.value.length > 0) {
        relateRequirementId.value = useableRelateRequirements.value[0].id as number
      } else {
        relateRequirementId.value = null
      }
    } else {
      relateIterationId.value = null
      relateRequirementId.value = null
    }
  }
})

watch(relateIterationId, (newRelateIterationId) => {
  if (newRelateIterationId == null) {
    relateRequirementId.value = null
    useableRelateRequirements.value = [] // 清空需求列表
    return // 提前返回
  }

  // 从当前可用的迭代列表中查找对应的迭代
  const currentIteration = useableRelateIterations.value.find(
    (iteration) => iteration.id === newRelateIterationId
  )

  // 更新可用的需求列表
  useableRelateRequirements.value = currentIteration?.requirementVoList || []

  // 如果有可用的需求，并且当前任务没有关联需求，则设置第一个为默认值
  if (useableRelateRequirements.value.length > 0 && !task.value.reqId) {
    relateRequirementId.value = useableRelateRequirements.value[0].id
  } else {
    // 保持当前任务的关联需求
    relateRequirementId.value = task.value.reqId == -1 ? null : task.value.reqId
  }
})
const handleChangeRelation = async () => {
  try {
    updateTaskRequest.value.id = task.value.id
    if (relateMilestoneId.value == null) {
      updateTaskRequest.value.mileId = -1 as number
    } else {
      updateTaskRequest.value.mileId = relateMilestoneId.value as number
    }
    if (relateIterationId.value == null) {
      updateTaskRequest.value.iterId = -1 as number
    } else {
      updateTaskRequest.value.iterId = relateIterationId.value as number
    }
    if (relateRequirementId.value == null) {
      updateTaskRequest.value.reqId = -1 as number
    } else {
      updateTaskRequest.value.reqId = relateRequirementId.value as number
    }
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  }
}
//#endrigon
// #region 附件相关
const attacheList = ref<API.AttachesVo[]>([])
const fileLoading = ref(false)
const hasMoreAttaches = ref(true)
const total = ref(0) // 添加总数记录

const pageAttacheRequest = ref<API.PageAttacheRequest>({
  current: 1,
  pageSize: 5,
  typeId: task.value.id as number,
  type: 3
})

// 加载更多文件
const loadMoreAttaches = async () => {
  if (fileLoading.value) return
  fileLoading.value = true

  try {
    pageAttacheRequest.value.typeId = task.value.id as number
    const res: any = await pageAttachesUsingPost(pageAttacheRequest.value)
    if (res.code === 0) {
      total.value = res.data.total

      // 如果是第一页，直接赋值
      if (pageAttacheRequest.value.current === 1) {
        attacheList.value = res.data.records
      } else {
        // 否则追加数据
        attacheList.value = [...attacheList.value, ...res.data.records]
      }

      // 判断是否还有更多数据
      hasMoreAttaches.value = attacheList.value.length < total.value

      // 更新页码
      if (hasMoreAttaches.value) {
        pageAttacheRequest.value.current += 1
      }
    } else {
      Message.error(res.message || '获取文件列表失败')
    }
  } finally {
    fileLoading.value = false
  }
}

const addAttacheRequest = ref<API.addAttacheUsingPOSTParams>({
  fileName: '',
  typeId: task.value.id as number,
  type: 3
})
// 处理文件上传前的验证
const beforeUpload = (file: File) => {
  const maxSize = 10 * 1024 * 1024 // 10MB

  if (file.size > maxSize) {
    Message.error('文件大小不能超过10MB')
    return false
  }

  // 设置文件名
  addAttacheRequest.value.fileName = file.name
  return true
}
// 处理文件上传
const handleUpload = async (option: any) => {
  const { fileItem } = option
  try {
    addAttacheRequest.value.fileName = fileItem.file.name
    addAttacheRequest.value.typeId = task.value.id as number
    const res: any = await addAttacheUsingPost(addAttacheRequest.value, fileItem.file)

    if (res.code === 0) {
      Message.success('上传成功')
      // 重置并重新加载
      pageAttacheRequest.value.current = 1
      await loadMoreAttaches()
    } else {
      Message.error(res.message || '上传失败')
    }
  } catch (error) {
    Message.error('文件上传失败')
  }
}

// 修改上传和删除的处理函数
const handleDeleteAttache = async (record: any) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除附件 "${record.name}" 吗？`,
    okText: '确认删除',
    cancelText: '取消',
    onOk: async () => {
      try {
        const res: any = await deleteAttacheUsingDelete({
          type: 3,
          typeId: task.value.id,
          attacheId: record.id
        })

        if (res.code === 0) {
          Notification.success('删除成功')
          // 重置并重新加载
          pageAttacheRequest.value.current = 1
          await loadMoreAttaches()
        } else {
          Message.error(res.message || '删除失败')
        }
      } catch (error) {
        Message.error('删除失败')
      }
    }
  })
}
//#endregion

// #region 时间 相关
const getTimeRange = computed(() => {
  // 默认允许所有时间
  const defaultRange = {
    start: null,
    end: null
  }

  try {
    // 按优先级检查并设置范围
    if (relateReq.value && relateReq.value.startTime && relateReq.value.endTime) {
      return {
        start: relateReq.value.startTime,
        end: relateReq.value.endTime
      }
    }

    if (relateIter.value && relateIter.value.startTime && relateIter.value.endTime) {
      return {
        start: relateIter.value.startTime,
        end: relateIter.value.endTime
      }
    }

    if (relateMile.value && relateMile.value.startTime && relateMile.value.endTime) {
      return {
        start: relateMile.value.startTime,
        end: relateMile.value.endTime
      }
    }

    if (relatePro.value && relatePro.value.startTime && relatePro.value.endTime) {
      return {
        start: relatePro.value.startTime,
        end: relatePro.value.endTime
      }
    }
  } catch (error) {
    console.error('计算时间范围出错:', error)
  }

  return defaultRange
})

// 日期选择器的 disabled-date 判断逻辑
const isDateDisabled = (current: Date | null) => {
  if (!current) return false

  const range = getTimeRange.value
  // 如果没有限制范围，则允许选择任何日期
  if (!range.start || !range.end) return false

  try {
    const currentDate = dayjs(current)
    const startDate = dayjs(range.start)
    const endDate = dayjs(range.end)

    return currentDate.isBefore(startDate, 'day') || currentDate.isAfter(endDate, 'day')
  } catch (error) {
    console.error('日期判断出错:', error)
    return false
  }
}

// 开始时间处理函数
const handleStartTimeOk = async (value: string | undefined) => {
  if (!value) return false

  const selectedTime = dayjs(value)

  // 检查是否晚于结束时间
  if (task.value.endTime) {
    const endTime = dayjs(task.value.endTime)
    if (selectedTime.isAfter(endTime)) {
      Message.warning('开始时间不能晚于结束时间')
      return false
    }
  }

  // 检查时间是否在允许范围内
  const range = getTimeRange.value
  if (range.start && range.end) {
    const startLimit = dayjs(range.start)
    const endLimit = dayjs(range.end)

    if (selectedTime.isBefore(startLimit) || selectedTime.isAfter(endLimit)) {
      Message.warning('所选时间超出允许范围')
      return false
    }
  }

  // 更新任务开始时间
  updateTaskRequest.value = {
    id: task.value.id,
    startTime: dayjs(value).format('YYYY-MM-DDTHH:mm:ss'),
    mileId: -1,
    iterId: -1,
    reqId: -1
  }

  try {
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
      return true
    } else {
      Message.error(res.message)
      return false
    }
  } catch (error) {
    Message.error('更新失败')
    return false
  }
}

// 截止时间处理函数
const handleEndTimeOk = async (value: string | undefined) => {
  if (!value) return false

  const selectedTime = dayjs(value)

  // 检查是否早于开始时间
  if (task.value.startTime) {
    const startTime = dayjs(task.value.startTime)
    if (selectedTime.isBefore(startTime)) {
      Message.warning('结束时间不能早于开始时间')
      return false
    }
  }

  // 检查时间是否在允许范围内
  const range = getTimeRange.value
  if (range.start && range.end) {
    const startLimit = dayjs(range.start)
    const endLimit = dayjs(range.end)

    if (selectedTime.isBefore(startLimit) || selectedTime.isAfter(endLimit)) {
      Message.warning('所选时间超出允许范围')
      return false
    }
  }

  // 更新任务结束时间
  updateTaskRequest.value = {
    id: task.value.id,
    endTime: dayjs(value).format('YYYY-MM-DDTHH:mm:ss'),
    mileId: -1,
    iterId: -1,
    reqId: -1
  }

  try {
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
      return true
    } else {
      Message.error(res.message)
      return false
    }
  } catch (error) {
    Message.error('更新失败')
    return false
  }
}

// 修改状态
const handleStatusChange = async (status: number) => {
  // 重置更新请求对象,只保留必要参数
  updateTaskRequest.value = {
    id: task.value.id, // 保留任务ID
    status: status, // 只设置要更新的状态
    mileId: -1,
    iterId: -1,
    reqId: -1
  }

  try {
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  }
}

// 修改负责人
const handleOwnerChange = async (userId: number) => {
  // 重置更新请求对象,只保留必要参数
  updateTaskRequest.value = {
    id: task.value.id,
    ownerId: userId,
    mileId: -1,
    iterId: -1,
    reqId: -1
  }
  try {
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  }
}

// #region 评论
// 评论内容
const commentContent = ref('')
//emoji
const emojisOutput = ref('')
const showEmoji = (emoji: any) => {
  // 直接将表情插入到评论内容中
  commentContent.value += emoji.native
}
// @列表
const atList: Ref<API.UserVO[]> = ref([])
// 修改成员列表部分
const toggleAtMember = (member: API.UserVO) => {
  const index = atList.value.findIndex((m) => m.id === member.id)
  if (index === -1) {
    // 如果不在列表中，添加成员并在评论中插入@
    atList.value.push(member)
    commentContent.value += `@${member.name || member.username} `
  } else {
    // 如果已在列表中，移除成员并从评论中删除@
    atList.value.splice(index, 1)
    const atText = `@${member.name || member.username} `
    commentContent.value = commentContent.value.replace(atText, '')
  }
}

// 在评论输入框下方添加附件预览区
const commentFiles = ref<Array<{ id: number; name: string; url?: string }>>([])

// 修改处理评论附件上传函数
const handleCommentFileUpload = async (option: any) => {
  const file = option.fileItem.file
  // 验证文件大小
  if (file.size > 1024 * 1024) {
    Message.error('文件大小不能超过1M')
    return
  }

  try {
    const res: any = await uploadFileUsingPost(file)
    if (res.code === 0) {
      commentFiles.value.push({
        id: file.lastModified, // 使用 lastModified 作为唯一标识
        name: file.name,
        url: res.data
      })
    } else {
      Message.error(res.message || '文件上传失败')
    }
  } catch (error) {
    Message.error('文件上传失败' + error)
  }
}

// 修改移除评论附件函数
const removeCommentFile = (fileId: number) => {
  const index = commentFiles.value.findIndex((f) => f.id === fileId)
  if (index > -1) {
    commentFiles.value.splice(index, 1)
  }
}
const addTaskCommentRequest: Ref<API.AddTaskCommentRequest> = ref({
  taskId: task.value.id,
  content: commentContent.value,
  atUserList: atList.value.map((item) => item.id as number),
  attacheList: commentFiles.value
})
const handleSendComment = async () => {
  if (
    !commentContent.value.trim() &&
    atList.value.length === 0 &&
    commentFiles.value.length === 0
  ) {
    Message.warning('请输入评论内容')
    return
  }

  try {
    addTaskCommentRequest.value.taskId = task.value.id
    addTaskCommentRequest.value.content = commentContent.value
    addTaskCommentRequest.value.atUserList = atList.value.map((item) => item.id as number)
    addTaskCommentRequest.value.attacheList = commentFiles.value
    const res: any = await addTaskCommentUsingPost(addTaskCommentRequest.value)
    if (res.code === 0) {
      pageTaskCommentRequest.value.current = 1
      hasMoreComment.value = true
      await loadMoreComment()
    } else {
      Message.error(res.message)
    }
    // 清空输入
    commentContent.value = ''
    commentFiles.value = []
    atList.value = []
  } catch (error) {
    Message.error('发送评论失败')
  }
}

// 任务评论列表
const commentList = ref<API.TaskCommentVo[]>([])
const commentLoading = ref(false)
const hasMoreComment = ref(true)
// 加载更多评论
const pageTaskCommentRequest: Ref<API.PageTaskCommentRequest> = ref({
  taskId: task.value.id,
  current: 1,
  pageSize: 10
})
const loadMoreComment = async () => {
  if (commentLoading.value || !hasMoreComment.value) return
  commentLoading.value = true
  try {
    // 记录当前滚动容器的高度
    const target = document.querySelector('.comment-list') as HTMLElement
    const oldScrollHeight = target?.scrollHeight || 0
    pageTaskCommentRequest.value.taskId = task.value.id
    const res: any = await pageTaskCommentUsingPost(pageTaskCommentRequest.value)
    const total = res.data?.total
    if (res.code === 0) {
      // 对结果中的 params 属性解析
      const records = res.data.records.map((item: API.TaskCommentVo) => {
        if (item.params) {
          // 解析附件列表
          item.attachments = item.params.A ? JSON.parse(item.params.A) : []
          // 解析@用户列表
          item.atUsers = item.params.M ? JSON.parse(item.params.M) : []
          // 删除原始 params 数据
          delete item.params
        }
        return item
      })

      // 将新数据按时间正序排列（旧的在前，新的在后）
      const sortedRecords = records.reverse()

      if (pageTaskCommentRequest.value.current == 1) {
        commentList.value = sortedRecords
        await nextTick()
        const target = document.querySelector('.comment-list') as HTMLElement
        if (target) {
          target.scrollTop = target.scrollHeight
        }
      } else {
        // 新的数据需要添加到前面，因为它们是更早的评论
        commentList.value = [...sortedRecords, ...commentList.value]
      }

      // 更新页码
      pageTaskCommentRequest.value.current = (pageTaskCommentRequest.value.current as number) + 1
      // 检查是否还有更多数据
      if ((pageTaskCommentRequest.value.current as number) >= total) {
        hasMoreComment.value = false
      }

      // 等待 DOM 更新
      await nextTick()

      // 如果是加载更多（不是第一页），调整滚动位置
      if (pageTaskCommentRequest.value.current > 2) {
        const newScrollHeight = target?.scrollHeight || 0
        const heightDiff = newScrollHeight - oldScrollHeight
        if (target && heightDiff > 0) {
          target.scrollTop = heightDiff
        }
      }
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    console.error('加载评论失败:', error)
  } finally {
    commentLoading.value = false
  }
}
// 删除评论方法
const handleDeleteComment = async (commentId: number) => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除这条评论吗？',
    onOk: async () => {
      try {
        const res: any = await deleteTaskCommentUsingDelete({ id: commentId })
        if (res.code === 0) {
          Message.success('删除成功')
          // 重新加载评论列表
          pageTaskCommentRequest.value.current = 1
          hasMoreComment.value = true
          await loadMoreComment()
        } else {
          Message.error(res.message)
        }
      } catch (error) {
        Message.error('删除失败' + error)
      }
    }
  })
}
// 监听滚动加载更多
const handleCommentScroll = async (e: Event) => {
  const target = e.target as HTMLElement
  // 当滚动到顶部附近时触发加载（预加载）
  if (target.scrollTop <= 50 && !commentLoading.value && hasMoreComment.value) {
    await loadMoreComment()
    // 加载完成后，将滚动位置向下调整一点，为下次加载做准备
    const currentScrollHeight = target.scrollHeight
    const newCommentHeight = 100 // 预估的新评论高度
    target.scrollTop = newCommentHeight
  }
}
// #endregion
// #region 动态
// 添加动态数据
const dynamics = ref<API.TaskDynamicVo[]>([])
const dynamicLoading = ref(false)
const hasMoreDynamic = ref(true)
const pageTaskDynamicRequest: Ref<API.PageTaskDynamicRequest> = ref({
  taskId: task.value.id,
  current: 1,
  pageSize: 10
})
const loadlMoreDynamics = async () => {
  if (dynamicLoading.value || !hasMoreDynamic.value) return
  dynamicLoading.value = true
  try {
    pageTaskDynamicRequest.value.taskId = task.value.id
    const res: any = await pageTaskDynamicsUsingPost(pageTaskDynamicRequest.value)
    if (res.code === 0) {
      // 模拟加载更多
      if (pageTaskDynamicRequest.value.current == 1) {
        dynamics.value = res.data.records
      } else {
        dynamics.value.push(...res.data.records)
      }
      // 更新页码
      pageTaskDynamicRequest.value.current = (pageTaskDynamicRequest.value.current as number) + 1
      // 检查是否还有更多数据
      if (dynamics.value.length >= res.data.total) {
        hasMoreDynamic.value = false
      }
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('加载动态失败')
  } finally {
    dynamicLoading.value = false
  }
}
// #endregion
const getEndTimeStatus = (endTime: string | undefined) => {
  if (!endTime) return { color: '', text: '', hint: '' }

  const now = dayjs()
  const end = dayjs(endTime)
  const daysLeft = end.diff(now, 'day')
  const formattedTime = dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
  //未逾期正常显示
  if (task.value.status == 4 && task.value?.completeTime && task.value?.completeTime <= endTime) {
    return {
      color: 'var(--color-success-light-4)',
      text: formattedTime,
      hint: '已完成'
    }
  } else if (
    task.value.status == 4 &&
    task.value?.completeTime &&
    task.value?.completeTime > endTime
  ) {
    return {
      color: 'var(--color-text-1)',
      text: formattedTime,
      hint: '已完成'
    }
  }
  if (daysLeft < 0) {
    return {
      color: 'var(--color-danger-light-4)',
      text: formattedTime,
      hint: `已逾期 ${Math.abs(daysLeft)} 天`
    }
  } else if (daysLeft === 0) {
    return {
      color: 'var(--color-danger-light-4)',
      text: formattedTime,
      hint: '今天截止'
    }
  } else if (daysLeft <= 1) {
    return {
      color: 'var(--color-warning-light-4)',
      text: formattedTime,
      hint: '剩余 1 天'
    }
  } else if (daysLeft <= 3) {
    return {
      color: 'var(--color-warning-light-5)',
      text: formattedTime,
      hint: `剩余 ${daysLeft} 天`
    }
  }

  return {
    color: '',
    text: formattedTime,
    hint: ''
  }
}
// 获取任务相关数据
const getTaskData = async () => {
  if (!props.taskId) return
  const taskId = props.taskId
  const res: any = await getTaskDetailUsingGet({ id: taskId })
  if (res.code === 0) {
    task.value = res.data
    pageTaskDynamicRequest.value.taskId = taskId
    pageTaskDynamicRequest.value.current = 1
    hasMoreDynamic.value = true
    await loadlMoreDynamics()
    relateMilestoneId.value = res.data.mileId == -1 ? null : res.data.mileId
    relateIterationId.value = res.data.iterId == -1 ? null : res.data.iterId
    relateRequirementId.value = res.data.reqId == -1 ? null : res.data.reqId
    initTaskUpdateReuqest()
  } else {
    Message.error(res.message)
  }
  //初始化函数对应搜索条件
  pageTaskDynamicRequest.value.taskId = taskId
  pageTaskDynamicRequest.value.current = 1
  hasMoreDynamic.value = true
  pageTaskCommentRequest.value.taskId = taskId
  pageTaskCommentRequest.value.current = 1
  hasMoreComment.value = true
  pageAttacheRequest.value.typeId = taskId
  pageAttacheRequest.value.current = 1
  hasMoreAttaches.value = true

  await Promise.all([
    loadlMoreDynamics(),
    loadMoreComment(),
    loadMoreAttaches(),
    getRelatePro(),
    getRelateMile(),
    getRelateIter(),
    getRelateReq()
  ])
}
const handleClose = () => {
  emit('update:visible', false)
  emit('close', task.value.id as number)
}
//初始化
onMounted(async () => {
  await getTaskData()
  await nextTick()
  await getProjectMembers()
})

// 添加优先级修改处理函数
const handlePriorityChange = async (priority: number) => {
  // 重置更新请求对象,只保留必要参数
  updateTaskRequest.value = {
    id: task.value.id,
    priority: priority,
    mileId: -1,
    iterId: -1,
    reqId: -1
  }

  try {
    const res: any = await updateTaskUsingPut(updateTaskRequest.value)
    if (res.code === 0) {
      await getTaskData()
    } else {
      Message.error(res.message)
    }
  } catch (error) {
    Message.error('更新失败')
  }
}
</script>

<template>
  <a-modal
    :visible="visible"
    @update:visible="(val) => emit('update:visible', val)"
    @cancel="handleClose"
    modal-class="task-view-modal"
    :footer="false"
    :mask-closable="true"
    draggable
    :fullscreen="fullscreen"
    width="auto"
  >
    <!-- 修改标题栏部分 -->
    <template #title>
      <div class="modal-title" @dblclick="fullscreen = !fullscreen">
        <div class="title-left">
          <a-button type="secondary" size="small" class="project-info">
            <span class="project-name">{{ task?.title }}</span>
            <span class="separator">|</span>
            <span class="task-code">{{ task?.code }}</span>
          </a-button>
        </div>
        <a-tooltip content="双击头部标题">
          <div class="title-actions">
            <a-button
              type="text"
              size="small"
              @click="fullscreen = !fullscreen"
              :title="fullscreen ? '退出全屏' : '全屏'"
            >
              <template #icon>
                <icon-fullscreen-exit v-if="fullscreen" />
                <icon-fullscreen v-else />
              </template>
            </a-button>
          </div>
        </a-tooltip>
      </div>
    </template>

    <template v-if="task">
      <a-row :gutter="32" class="task-view-content" :class="{ 'is-fullscreen': fullscreen }">
        <!-- 左侧内容区 -->
        <a-col :span="fullscreen ? 16 : 16" class="left-content">
          <div class="left-content-scroll">
            <div class="task-header">
              <div
                class="title-wrapper"
                :class="{ 'is-editing': isEditingTitle }"
                @click="startEditTitle"
              >
                <a-input
                  v-if="isEditingTitle"
                  v-model="editedTitle"
                  :default-value="task?.title"
                  @blur="handleTitleChange"
                  @keyup.enter="handleTitleChange"
                  class="title-input"
                  :max-length="100"
                  show-word-limit
                />
                <h1 v-else class="task-main-title">
                  {{ task.title }}
                </h1>
              </div>

              <!-- 修改任务基本信息行 -->
              <a-row class="task-basic-info">
                <!-- 状态 -->
                <a-col :span="task.status === 4 && task.completeTime ? 4 : 6">
                  <a-popover trigger="click" position="bottom">
                    <!-- Popover 触发元素 -->
                    <div class="info-item">
                      <component
                        :is="getCompleteIcon(task.status)"
                        class="info-icon"
                        :size="32"
                        :style="{ color: getCompleteColor(task.status) }"
                      />
                      <div class="info-content">
                        <a-tag :color="getCompleteColor(task.status)">
                          {{ getCompleteStatus(task.status) }}
                        </a-tag>
                        <span class="info-label">状态</span>
                      </div>
                    </div>

                    <!-- Popover 内容 -->
                    <template #content>
                      <div class="status-list">
                        <div
                          v-for="status in Object.values(COMPLETE_STATUS_CONFIG).filter(
                            (s) => s.value !== 3
                          )"
                          :key="status.value"
                          class="status-item"
                          :class="{ 'is-active': task.status === status.value }"
                          @click="task.status !== status.value && handleStatusChange(status.value)"
                        >
                          <component :is="status.icon" :style="{ color: status.color }" />
                          <a-tag :color="status.color">
                            {{ status.label }}
                          </a-tag>
                        </div>
                      </div>
                    </template>
                  </a-popover>
                </a-col>

                <!-- 添加优先级 -->
                <a-col :span="task.status === 4 && task.completeTime ? 4 : 6">
                  <a-popover trigger="click" position="bottom">
                    <div class="info-item">
                      <icon-file class="info-icon" :size="32" />
                      <div class="info-content">
                        <a-tag :color="PRIORITY_CONFIG[`P${task.priority}`]?.color">
                          {{ PRIORITY_CONFIG[`P${task.priority}`]?.label || 'P2' }}
                        </a-tag>
                        <span class="info-label">优先级</span>
                      </div>
                    </div>

                    <!-- Popover 内容 -->
                    <template #content>
                      <div class="priority-list">
                        <div
                          v-for="priority in [0, 1, 2]"
                          :key="priority"
                          class="priority-item"
                          :class="{ 'is-active': task.priority === priority }"
                          @click="handlePriorityChange(priority)"
                        >
                          <a-tag :color="PRIORITY_CONFIG[`P${priority}`].color">
                            {{ PRIORITY_CONFIG[`P${priority}`].label }}
                          </a-tag>
                        </div>
                      </div>
                    </template>
                  </a-popover>
                </a-col>

                <!-- 负责人 -->
                <a-col :span="task.status === 6 && task.completeTime ? 4 : 6">
                  <a-popover trigger="click" position="bottom" style="width: 200px">
                    <!-- Popover 触发元素 -->
                    <div class="info-item">
                      <a-avatar :size="32" :image-url="task.owner?.avatar">
                        {{ task.owner?.nickname || task.owner?.username?.charAt(0) }}
                      </a-avatar>
                      <div class="info-content">
                        <span class="info-name">{{
                          task.owner?.name + `(` + task.owner?.username + `)`
                        }}</span>
                        <span class="info-label">负责人</span>
                      </div>
                    </div>

                    <!-- Popover 内容 -->
                    <template #content>
                      <div class="member-list">
                        <div
                          v-for="member in projectMembers"
                          :key="member.id"
                          class="member-item"
                          :class="{ 'is-active': task.ownerId === member.id }"
                          @click="task.ownerId !== member.id && handleOwnerChange(member.id)"
                        >
                          <a-avatar :size="28" :image-url="member.avatar">
                            {{ member.nickname || member.username?.charAt(0) }}
                          </a-avatar>
                          <span class="member-name">{{ member.nickname || member.username }}</span>
                        </div>
                      </div>
                    </template>
                  </a-popover>
                </a-col>

                <!-- 开始时间 -->
                <a-col :span="task.status === 6 && task.completeTime ? 4 : 6">
                  <a-popover trigger="click" position="bottom">
                    <div class="info-item">
                      <icon-calendar class="info-icon" :size="32" />
                      <div class="info-content">
                        <span class="time">{{
                          dayjs(task.startTime).format('YYYY-MM-DD HH:mm:ss')
                        }}</span>
                        <span class="info-label">开始时间</span>
                      </div>
                    </div>

                    <!-- 开始时间选择器 -->
                    <template #content>
                      <div class="date-picker-container">
                        <a-date-picker
                          show-time
                          placeholder="选择开始时间"
                          hide-trigger
                          :default-value="task.startTime"
                          :disabled-date="isDateDisabled"
                          @ok="handleStartTimeOk"
                        />
                      </div>
                    </template>
                  </a-popover>
                </a-col>

                <!-- 截止时间 -->
                <a-col :span="task.status === 6 && task.completeTime ? 4 : 6">
                  <a-popover trigger="click" position="bottom">
                    <div class="info-item">
                      <icon-calendar class="info-icon" :size="32" />
                      <div class="info-content">
                        <span
                          class="time"
                          :style="{
                            color: getEndTimeStatus(task.endTime).color || 'var(--color-text-1)'
                          }"
                        >
                          {{ getEndTimeStatus(task.endTime).text }}
                          <span v-if="getEndTimeStatus(task.endTime).hint" class="time-hint">
                            ({{ getEndTimeStatus(task.endTime).hint }})
                          </span>
                        </span>
                        <span class="info-label">截止时间</span>
                      </div>
                    </div>

                    <!-- 结束时间选择器 -->
                    <template #content>
                      <div class="date-picker-container">
                        <a-date-picker
                          show-time
                          placeholder="选择截止时间"
                          hide-trigger
                          :default-value="task.endTime"
                          :disabled-date="isDateDisabled"
                          @ok="handleEndTimeOk"
                        />
                      </div>
                    </template>
                  </a-popover>
                </a-col>
              </a-row>
              <a-row class="task-complete-info">
                <!-- 完成时间 -->
                <a-col :span="6" v-if="task.status === 4 && task.completeTime">
                  <div class="info-item">
                    <icon-check-circle-fill
                      class="info-icon"
                      :size="32"
                      style="color: var(--color-success-light-4)"
                    />
                    <div class="info-content">
                      <span class="time">
                        {{ dayjs(task.completeTime).format('YYYY-MM-DD HH:mm:ss') }}
                      </span>
                      <span class="info-label">完成时间</span>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </div>

            <a-tabs class="task-detail-tabs">
              <a-tab-pane key="details" title="任务详情">
                <template #title>
                  <a-space>
                    <icon-file />
                    任务详情
                  </a-space>
                </template>
                <div class="task-relations">
                  <a-row :gutter="16">
                    <!-- 关联项目 -->
                    <a-col :span="5">
                      <div class="relation-item">
                        <span class="relation-label">关联项目:</span>
                        <span class="relation-content">{{ relatePro?.title || '无' }}</span>
                      </div>
                    </a-col>

                    <!-- 关联里程碑 -->
                    <a-col :span="5">
                      <div class="relation-item">
                        <span class="relation-label">关联里程碑:</span>
                        <a-select
                          v-model="relateMilestoneId"
                          placeholder="选择里程碑"
                          size="small"
                          allow-clear
                        >
                          <a-option
                            v-for="milestone in useableRelateMilestones"
                            :key="milestone.id"
                            :value="milestone.id"
                            :label="milestone.title"
                          >
                            {{ milestone.title }}
                          </a-option>
                        </a-select>
                      </div>
                    </a-col>

                    <!-- 关联迭代 -->
                    <a-col :span="5">
                      <div class="relation-item">
                        <span class="relation-label">关联迭代:</span>
                        <a-select
                          v-model="relateIterationId"
                          placeholder="选择迭代"
                          size="small"
                          allow-clear
                        >
                          <a-option
                            v-for="iteration in useableRelateIterations"
                            :key="iteration.id"
                            :value="iteration.id"
                            :label="iteration.title"
                          >
                            {{ iteration.title }}
                          </a-option>
                        </a-select>
                      </div>
                    </a-col>

                    <!-- 关联需求 -->
                    <a-col :span="5">
                      <div class="relation-item">
                        <span class="relation-label">关联需求:</span>
                        <a-select
                          v-model="relateRequirementId"
                          placeholder="选择需求"
                          size="small"
                          allow-clear
                        >
                          <a-option
                            v-for="requirement in useableRelateRequirements"
                            :key="requirement.id"
                            :value="requirement.id"
                            :label="requirement.title"
                          >
                            {{ requirement.title }}
                          </a-option>
                        </a-select>
                      </div>
                    </a-col>
                    <a-col :span="2">
                      <div class="relation-item">
                        <span class="relation-label">修改关联</span>
                        <a-button status="warning" size="small" @click="handleChangeRelation">
                          修改
                        </a-button>
                      </div>
                    </a-col>
                  </a-row>
                </div>
                <div class="description-wrapper">
                  <div class="section">
                    <div class="section-header">
                      <h3>描述</h3>
                      <div class="section-actions">
                        <a-button
                          type="secondary"
                          size="mini"
                          @click="startEditDescription"
                          v-if="!isEditingDescription"
                        >
                          <template #icon><icon-edit :size="20" /></template>
                        </a-button>
                        <a-button
                          type="secondary"
                          size="mini"
                          v-if="!isEditingDescription"
                          @click="toggleDescriptionFullscreen"
                        >
                          <template #icon>
                            <icon-fullscreen-exit v-if="isDescriptionFullscreen" :size="20" />
                            <icon-fullscreen v-else :size="20" />
                          </template>
                        </a-button>
                      </div>
                    </div>

                    <!-- 查看模式 -->
                    <template v-if="!isEditingDescription">
                      <div
                        v-if="!task.description || task.description === '<p><br></p>'"
                        class="empty-content"
                      >
                        <span class="empty-text">无</span>
                      </div>
                      <div
                        v-else
                        class="description-wrapper"
                        :class="{ 'is-fullscreen': isDescriptionFullscreen }"
                      >
                        <!-- 退出全屏按钮 -->
                        <div v-if="isDescriptionFullscreen" class="fullscreen-exit-btn">
                          <a-button type="secondary" @click="toggleDescriptionFullscreen">
                            <template #icon><icon-fullscreen-exit :size="20" /></template>
                            退出全屏
                          </a-button>
                        </div>
                        <!-- 描述内容 -->
                        <div
                          class="content-box description-content"
                          v-html="task.description"
                        ></div>
                      </div>
                    </template>

                    <!-- 编辑模式 -->
                    <div v-if="isEditingDescription" class="editor-container">
                      <Toolbar
                        style="border-bottom: 1px solid var(--color-border)"
                        :editor="descriptionEditor"
                        mode="default"
                      />
                      <Editor
                        v-model="tempDescription"
                        :default-config="editorConfig"
                        :style="editorStyle"
                        mode="default"
                        @on-created="(editor) => (descriptionEditor = editor)"
                      />
                      <div class="editor-actions">
                        <a-space>
                          <a-button type="outline" @click="cancelEditDescription">取消</a-button>
                          <a-button type="primary" @click="saveDescription">保存</a-button>
                        </a-space>
                      </div>
                    </div>
                  </div>

                  <div class="remark-wrapper">
                    <!-- 原有的备注部分 -->
                    <div class="section">
                      <div class="section-header">
                        <h3>备注</h3>
                        <div class="section-actions">
                          <a-button
                            type="secondary"
                            size="mini"
                            @click="startEditRemark"
                            v-if="!isEditingRemark"
                          >
                            <template #icon><icon-edit :size="20" /></template>
                          </a-button>
                          <a-button
                            type="secondary"
                            size="mini"
                            v-if="!isEditingRemark"
                            @click="toggleRemarkFullscreen"
                          >
                            <template #icon>
                              <icon-fullscreen-exit v-if="isRemarkFullscreen" :size="20" />
                              <icon-fullscreen v-else :size="20" />
                            </template>
                          </a-button>
                        </div>
                      </div>

                      <!-- 查看模式 -->
                      <template v-if="!isEditingRemark">
                        <div
                          v-if="!task.remark || task.remark === '<p><br></p>'"
                          class="empty-content"
                        >
                          <span class="empty-text">无</span>
                        </div>
                        <div
                          v-else
                          class="remark-wrapper"
                          :class="{ 'is-fullscreen': isRemarkFullscreen }"
                        >
                          <!-- 退出全屏按钮 -->
                          <div v-if="isRemarkFullscreen" class="fullscreen-exit-btn">
                            <a-button type="secondary" @click="toggleRemarkFullscreen">
                              <template #icon><icon-fullscreen-exit :size="20" /></template>
                              退出全屏
                            </a-button>
                          </div>
                          <!-- 备注内容 -->
                          <div class="content-box remark-content" v-html="task.remark"></div>
                        </div>
                      </template>

                      <!-- 编辑模式 -->
                      <div v-if="isEditingRemark" class="editor-container">
                        <Toolbar
                          style="border-bottom: 1px solid var(--color-border)"
                          :editor="remarkEditor"
                          mode="default"
                        />
                        <Editor
                          v-model="tempRemark"
                          :default-config="editorConfig"
                          :style="editorStyle"
                          mode="default"
                          @on-created="(editor) => (remarkEditor = editor)"
                        />
                        <div class="editor-actions">
                          <a-space>
                            <a-button type="outline" @click="cancelEditRemark">取消</a-button>
                            <a-button type="primary" @click="saveRemark">保存</a-button>
                          </a-space>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>

              <!-- 附件面板 -->
              <a-tab-pane key="attachments" title="附件">
                <template #title>
                  <a-space>
                    <icon-attachment />
                    附件
                  </a-space>
                </template>
                <div class="attachments-container">
                  <!-- 修改附件面板的添加按钮部分 -->
                  <div class="attachments-header">
                    <span class="attachments-count">共 {{ total }} 个附件</span>
                    <a-upload
                      :custom-request="handleUpload"
                      :show-file-list="false"
                      @before-upload="beforeUpload"
                    >
                      <template #upload-button>
                        <a-button type="text" class="add-attachment-btn">
                          <template #icon>
                            <icon-plus />
                          </template>
                          添加附件
                        </a-button>
                      </template>
                    </a-upload>
                  </div>
                  <!-- 附件列表内容 -->
                  <a-table
                    :data="attacheList"
                    :pagination="false"
                    :bordered="false"
                    size="small"
                    :loading="fileLoading"
                    :show-header="false"
                    scroll-x="1000"
                  >
                    <template #columns>
                      <!-- 文件信息列（合并文件名、大小） -->
                      <a-table-column align="left" :flex="1" :width="350">
                        <template #cell="{ record }">
                          <a-row class="file-info-cell">
                            <a-col :span="18" class="file-name">
                              <component :is="getFileIcon(record.name)" class="file-icon" />
                              <span class="file-name-text">{{ record.name }}</span>
                            </a-col>
                            <a-col :span="6" class="file-size">{{
                              formatFileSize(record.size)
                            }}</a-col>
                          </a-row>
                        </template>
                      </a-table-column>

                      <!-- 上传信息列（合并上传人和时间） -->
                      <a-table-column align="left" :flex="1">
                        <template #cell="{ record }">
                          <a-row class="upload-info-cell"> </a-row>
                          <div class="upload-info-cell">
                            <div class="uploader-info">
                              <a-avatar :size="24" :image-url="record.uploader.avatar">
                                {{ record.uploader.name?.[0] }}
                              </a-avatar>
                              <span class="uploader-name" style="margin-left: 14px">{{
                                record.uploader.name
                              }}</span>
                            </div>
                            <span class="upload-time">{{
                              dayjs(record.uploadTime).format('YYYY-MM-DD HH:mm:ss')
                            }}</span>
                          </div>
                        </template>
                      </a-table-column>

                      <!-- 操作列 -->
                      <a-table-column align="right" :width="120">
                        <template #cell="{ record }">
                          <a-space>
                            <a-button
                              v-if="getFileType(record.extension) !== 'other'"
                              type="text"
                              size="small"
                              @click="handlePreview(record)"
                            >
                              <icon-eye />预览
                            </a-button>
                            <a-button type="text" size="small" @click="downloadFile(record)">
                              <icon-download />下载
                            </a-button>
                            <a-button
                              type="text"
                              status="danger"
                              size="small"
                              @click="handleDeleteAttache(record)"
                            >
                              <icon-delete />删除
                            </a-button>
                          </a-space>
                        </template>
                      </a-table-column>
                    </template>
                  </a-table>

                  <!-- 加载更多按钮 -->
                  <div v-if="hasMoreAttaches" class="load-more">
                    <a-button
                      type="text"
                      size="small"
                      :loading="fileLoading"
                      @click="
                        async () => {
                          await loadMoreAttaches()
                        }
                      "
                    >
                      加载更多
                    </a-button>
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-col>

        <!-- 右侧评论区 -->
        <a-col :span="fullscreen ? 8 : 8" class="comment-col">
          <a-tabs>
            <!-- 评论面板 -->
            <a-tab-pane key="commentList" title="评论">
              <template #title>
                <a-space>
                  <icon-message />
                  评论
                </a-space>
              </template>
              <div class="comment-section">
                <!-- 评论列表区域 -->
                <div class="comment-list" @scroll="handleCommentScroll">
                  <template v-if="commentList.length > 0">
                    <!-- 加载状态提示 -->
                    <div v-if="commentLoading" class="comment-loading">
                      <a-spin dot />
                      <span>加载中...</span>
                    </div>
                    <!-- 没有更多数据的提示 -->
                    <div v-if="!hasMoreComment && !commentLoading" class="no-more-comment">
                      <a-divider>没有更多评论了</a-divider>
                    </div>
                    <!-- 评论列表 -->
                    <div v-for="comment in commentList" :key="comment.id" class="comment-item">
                      <div class="comment-layout">
                        <!-- 左侧头像区域 -->
                        <div class="comment-left">
                          <a-avatar :size="40" :image-url="comment?.sendUser?.avatar">
                            {{ comment?.sendUser?.name?.[0] }}
                          </a-avatar>
                        </div>

                        <!-- 右侧内容区域 -->
                        <div class="comment-right">
                          <!-- 发送者信息和时间 -->
                          <div class="comment-header">
                            <span class="sender-name">{{ comment?.sendUser?.name }}</span>
                            <div class="header-right">
                              <span class="send-time">{{
                                dayjs(comment?.createAt).format('MM-DD HH:mm:ss')
                              }}</span>
                              <!-- 当评论是当前用户发送的才显示删除图标 -->
                              <icon-delete
                                v-if="comment.sendId === userStore.user.id"
                                class="delete-icon"
                                @click="handleDeleteComment(comment?.id)"
                              />
                            </div>
                          </div>

                          <!-- @用户列表 -->
                          <div v-if="comment.atUsers?.length" class="at-users">
                            <a-tag
                              v-for="user in comment.atUsers"
                              :key="user.id"
                              class="at-user-tag"
                            >
                              @{{ user.name }}
                            </a-tag>
                          </div>

                          <!-- 附件列表 -->
                          <div v-if="comment.attachments?.length" class="attachments-list">
                            <div
                              v-for="file in comment.attachments"
                              :key="file.id"
                              class="attachment-item"
                            >
                              <!-- 文件信息行 -->
                              <div class="file-info-row">
                                <icon-file class="file-icon" />
                                <span class="file-name">{{ file.name }}</span>
                                <div class="file-actions">
                                  <a-button type="text" size="mini" @click="downloadFile(file)">
                                    <icon-download />
                                  </a-button>
                                </div>
                              </div>
                              <!-- 图片预览行 -->
                              <div v-if="isImageFile(file.name)" class="image-preview-row">
                                <a-image
                                  :src="file.url"
                                  class="preview-image"
                                  fit="contain"
                                  width="100"
                                  height="100"
                                />
                              </div>
                            </div>
                          </div>

                          <!-- 评论内容 -->
                          <div class="comment-content">{{ comment.content }}</div>
                        </div>
                      </div>
                    </div>
                  </template>
                  <div v-else class="no-comments">
                    <a-divider>暂无评论</a-divider>
                  </div>
                </div>
                <a-divider direction="horizontal"></a-divider>
                <!-- 评论输入区域 -->
                <div class="comment-input-wrapper">
                  <div class="comment-input">
                    <a-textarea
                      v-model="commentContent"
                      placeholder="添加评论..."
                      :auto-size="{ minRows: 2, maxRows: 5 }"
                      :max-length="2000"
                      style="width: 100%"
                      show-word-limit
                    />
                    <!-- 在评论输入框下方添加附件预览区 -->
                    <div v-if="commentFiles.length > 0" class="comment-files">
                      <div v-for="file in commentFiles" :key="file.id" class="comment-file-item">
                        <!-- 根据文件类型显示不同的图标或预览图 -->
                        <template v-if="isImageFile(file.name)">
                          <img :src="file.url" class="file-preview-image" alt="preview" />
                        </template>
                        <template v-else>
                          <icon-file class="file-icon" />
                        </template>
                        <span class="file-name">{{ file.name }}</span>
                        <icon-close class="remove-icon" @click="removeCommentFile(file.id)" />
                      </div>
                    </div>
                    <a-space class="input-actions">
                      <div class="comment-toolbar">
                        <!-- 修改评论工具栏 -->
                        <div class="comment-toolbar">
                          <a-space>
                            <!-- 表情按钮 -->
                            <a-popover trigger="click" position="tr">
                              <a-button class="toolbar-btn" type="text" size="small">
                                <template #icon>
                                  <icon-face-smile-fill />
                                </template>
                              </a-button>
                              <template #content>
                                <Picker :data="emojiIndex" set="twitter" @select="showEmoji" />
                              </template>
                            </a-popover>

                            <!-- 艾特按钮 -->
                            <a-popover trigger="click" position="tr">
                              <a-button class="toolbar-btn" type="text" size="small">
                                <template #icon>
                                  <icon-at />
                                </template>
                              </a-button>
                              <template #content>
                                <!-- 成员列表内容 -->
                                <div class="member-list-container">
                                  <div class="member-list-header">选择要@的成员</div>
                                  <div class="member-list">
                                    <div
                                      v-for="member in projectMembers"
                                      :key="member.id"
                                      class="member-item"
                                      :class="{
                                        'is-selected': atList.some((m) => m.id === member.id)
                                      }"
                                      @click="toggleAtMember(member)"
                                    >
                                      <div class="member-info-wrapper">
                                        <a-avatar :size="24" :image-url="member.avatar">
                                          {{ member.name?.[0] || member.username?.[0] }}
                                        </a-avatar>
                                        <span class="member-name">{{
                                          member.name || member.username
                                        }}</span>
                                      </div>
                                      <icon-check v-if="atList.some((m) => m.id === member.id)" />
                                    </div>
                                  </div>
                                </div>
                              </template>
                            </a-popover>

                            <!-- 修改附件按钮部分 -->
                            <div class="upload-wrapper">
                              <a-upload
                                :custom-request="handleCommentFileUpload"
                                :show-file-list="false"
                              >
                                <template #upload-button>
                                  <a-button class="toolbar-btn" type="text" size="small">
                                    <template #icon>
                                      <icon-attachment />
                                    </template>
                                  </a-button>
                                </template>
                              </a-upload>
                              <span class="upload-tip">大小&lt;1MB</span>
                            </div>
                          </a-space>
                        </div>
                      </div>
                      <a-button type="primary" size="small" @click="handleSendComment"
                        >发送</a-button
                      >
                    </a-space>
                  </div>
                </div>
              </div>
            </a-tab-pane>

            <!-- 动态面板 -->
            <a-tab-pane key="dynamics" title="动态">
              <template #title>
                <a-space>
                  <icon-history />
                  动态
                </a-space>
              </template>
              <div class="dynamics-section">
                <div class="dynamics-list">
                  <template v-if="dynamics?.length">
                    <div v-for="dynamic in dynamics" :key="dynamic.id" class="dynamic-item">
                      <div class="dynamic-header">
                        <div class="user-info">
                          <a-avatar :size="24" :image-url="dynamic.creator?.avatar">
                            {{ dynamic.creator?.name?.[0] }}
                          </a-avatar>
                          <span class="username">{{ dynamic.creator?.name }}</span>
                        </div>
                        <span class="dynamic-time">{{
                          dayjs(dynamic.createAt).format('MM-DD HH:mm:ss')
                        }}</span>
                      </div>
                      <div class="dynamic-content">{{ dynamic.content }}</div>
                    </div>
                  </template>
                  <div v-else class="no-dynamics">
                    <icon-history style="font-size: 24px; opacity: 0.3" />
                    <span>暂无动态</span>
                  </div>
                </div>
                <div class="dynamic-load-wrapper">
                  <div class="dynamic-loadmore" v-if="hasMoreDynamic">
                    <a-button
                      type="text"
                      size="small"
                      :loading="dynamicLoading"
                      @click="loadlMoreDynamics()"
                      >加载更多</a-button
                    >
                  </div>
                  <div v-else class="no-more-dynamic">
                    <div class="no-more-dynamic-text">-没有更多动态了-</div>
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </a-col>
      </a-row>
    </template>
  </a-modal>

  <!-- 预览组件 -->
  <FilePreview v-model:isPreviewOpen="previewVisible" :file="previewFile" @close="closePreview" />
</template>

<style scoped>
/* 修改任务视图内容区域样式 */
.task-view-content {
  width: 1480px !important;
  min-width: 480px !important;
  max-width: 1920px !important;
  margin: 0 auto;
  height: 80vh;
  overflow: hidden;
  transition: all 0.1s ease;
}

/* 全屏状态下的样式 */
.task-view-content.is-fullscreen {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 60px) !important; /* 减去标题栏高度 */
}

/* 修改评论区样式，添加过渡效果 */
.comment-col {
  border-left: 1px solid var(--color-border);
  height: 100%;
  transition: all 0.1s ease;
}

.comment-section {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  position: relative;
}

/* 全屏状态下的评论区样式调整 */
.is-fullscreen .comment-section {
  height: calc(100vh - 120px);
}

.task-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

/* 修改基本信息行样式 */
.task-basic-info {
  margin-top: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}

.task-complete-info {
  margin-top: 16px;
  padding: 16px 0;
}
/* 修改信息项的悬浮样式 */
.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.info-item:hover {
  background-color: var(--color-fill-2);
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 13px;
  color: var(--color-text-3);
}

.info-name,
.time {
  font-size: 14px;
  color: var(--color-text-1);
  line-height: 1.5;
}

.info-icon {
  font-size: 16px;
  color: var(--color-text-2);
}

/* 移除时间信息行相关样式 */
.task-time-info {
  display: none;
}

.section {
  margin-bottom: 12px;
}

.section h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--color-text-1);
  border-left: 3px solid var(--color-primary);
  padding-left: 8px;
}

.content-box {
  /* background-color: var(--color-fill-1); */
  border-radius: 4px;
  padding: 16px;
  min-height: 100px;
  font-size: 14px;
  line-height: 1.5;
  color: #aaaa;
}

/* 修改标题栏样式 */
.modal-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 40px;
}

.title-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.project-name {
  color: var(--color-text-3);
}

.separator {
  color: var(--color-text-4);
  margin: 0 2px;
}

.task-code {
  margin-left: 8px;
  font-size: 12px;
  font-weight: normal;
}

.task-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-1);
  position: relative;
  padding-left: 12px;
}

/* 添加分隔符 */
.task-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 1px;
  background-color: var(--color-border);
}

.title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title-actions :deep(.arco-btn) {
  padding: 0 4px;
}

.title-actions :deep(.arco-btn:hover) {
  background-color: var(--color-fill-3);
  border-radius: 4px;
}

/* 修改标题相关样式 */
.title-wrapper {
  position: relative;
  padding: 4px 8px;
  border: none; /* 移除默认边框 */
  border-radius: 4px;
  cursor: text;
  transition: all 0.1s;
}

.title-wrapper:hover {
  background-color: var(--color-fill-1); /* 只保留背景色变化 */
}

.title-wrapper.is-editing {
  background-color: var(--color-bg-1);
}

.task-main-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text-1);
  margin: 0;
  line-height: 1.4;
  min-height: 34px; /* 保持与输入框一致的高度 */
}

/* 修改输入框样式 */
.title-input {
  font-size: 24px !important;
  font-weight: 500 !important;
  padding: 0 !important;
}

:deep(.title-input .arco-input-wrapper) {
  padding: 0;
  background-color: transparent;
  border: none !important;
  box-shadow: none !important;
}

:deep(.title-input .arco-input-wrapper:hover),
:deep(.title-input .arco-input-wrapper.arco-input-focus) {
  background-color: transparent;
  border: none !important;
  box-shadow: none !important;
}

/* 评论列表和输入框样式 */
.comment-list {
  flex: 1;
  overflow-y: auto;
  padding-left: 8px;
  padding-bottom: 140px;
  display: flex;
  flex-direction: column; /* 恢复正常排序 */
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 修改为两端对齐 */
  margin-bottom: 5px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px; /* 时间和删除图标的间距 */
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.username {
  color: var(--color-text-1);
  font-weight: 500;
}

.comment-time {
  color: var(--color-text-3);
  font-size: 12px;
}

.comment-content {
  color: var(--color-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.comment-input-wrapper {
  flex: 3;
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  background-color: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  padding: 16px;
  z-index: 1; /* 确保输入框在上层 */
}

.comment-input {
  width: 100%;
}

.input-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

/* 自定义滚动条样式 */
.comment-list::-webkit-scrollbar {
  width: 6px;
}
.comment-list::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.comment-list::-webkit-scrollbar-track {
  background-color: transparent;
}
.dynamics-list::-webkit-scrollbar-track {
  background-color: transparent;
}
.dynamics-list::-webkit-scrollbar {
  width: 6px;
}
.dynamics-list::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}
.task-info-section {
  display: none;
}

/* 响应式布局调整 */
@media screen and (max-width: 1520px) {
  .task-view-content:not(.is-fullscreen) {
    width: 95vw !important;
  }
}

@media screen and (max-width: 1200px) {
  .task-view-content:not(.is-fullscreen) {
    height: auto;
  }

  .comment-col {
    border-left: none;
    border-top: 1px solid var(--color-border);
    margin-top: 24px;
    padding-top: 24px;
  }
}

/* 修改头像样式 */
.info-icon.arco-avatar {
  background-color: var(--color-fill-3);
  color: var(--color-text-2);
  font-size: 16px;
}

/* 修改日期图标样式 */
.date-icon.arco-avatar {
  background-color: var(--color-fill-3);
  color: var(--color-text-2);
  font-size: 16px;
}

/* 空内容样式 */
.empty-content {
  display: flex;
  padding-left: 16px;
  min-height: 80px;
  max-height: 160px;
  border-radius: 4px;
}

.empty-text {
  color: var(--color-text-3);
  font-size: 14px;
}

/* 创建和更新信息样式 */
.info-section {
  margin: 24px 0;
}

.info-row {
  display: flex;
  gap: 32px;
}

.info-detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-name {
  font-size: 14px;
  color: var(--color-text-1);
  line-height: 1.5;
}

.info-time {
  font-size: 12px;
  color: var(--color-text-3);
}

/* 描述区域样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-actions {
  display: flex;
  gap: 8px;
}

.section-actions :deep(.arco-btn) {
  padding: 0 4px;
}

.section-actions :deep(.arco-btn:hover) {
  background-color: var(--color-fill-3);
  border-radius: 4px;
}

.editor-container {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

/* 编辑器操作按钮样式 */
.editor-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px;
  background-color: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
}

/* 编辑器内容区域样式 */
:deep(.w-e-text-container) {
  height: auto !important;
  max-height: 300px !important;
  overflow-y: auto;
}

:deep(.w-e-text-container[contenteditable='true']) {
  min-height: 100px !important;
}

/* 修改编辑器容器样式 */
.editor-container {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

/* 编辑器全屏样式 */
:deep(.w-e-full-screen-container) {
  z-index: 2000 !important; /* 确保高于模态框 */
  position: fixed !important;
  background-color: var(--color-bg-1) !important;
}

:deep(.w-e-full-screen-container .w-e-text-container) {
  max-height: none !important; /* 移除全屏时的高度限制 */
}

/* 工具栏全屏样式 */
:deep(.w-e-toolbar.w-e-full-screen-toolbar) {
  position: fixed !important;
  width: 100% !important;
  z-index: 2001 !important; /* 确保工具栏在最上层 */
}

/* 修改描述内容区域样式 */
.description-content {
  padding: 16px;
  line-height: 1.6;
  color: var(--color-text-1);
  background-color: var(--color-bg-1);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

/* 描述内容的滚动条样式 */
.description-content::-webkit-scrollbar {
  width: 6px;
}

.description-content::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.description-content::-webkit-scrollbar-track {
  background-color: var(--color-fill-1);
  border-radius: 3px;
}

/* 确保段落样式正确 */
.description-content :deep(p) {
  margin: 0;
  padding: 0;
}

.description-content :deep(p:not(:last-child)) {
  margin-bottom: 8px;
}

/* 修改左侧内容区滚动样式 */
.left-content {
  height: 100%;
  overflow: hidden;
}

.left-content-scroll {
  height: 100%;
  overflow-y: auto;
  padding-right: 16px;
  /* 隐藏滚动条但保留滚动功能 */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* 隐藏 Webkit 浏览器的滚动条 */
.left-content-scroll::-webkit-scrollbar {
  display: none;
}

/* 确保任务视图内容区域高度正确 */
.task-view-content {
  height: 80vh;
  overflow: hidden;
}

/* 描述容器样式 */
.description-wrapper {
  position: relative;
}

/* 全屏样式调整 */
.description-wrapper.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background-color: var(--color-bg-1);
  padding: 32px;
}

.description-wrapper.is-fullscreen .description-content {
  height: 100%;
  max-height: none;
  border: none;
  padding: 0;
}

/* 全屏退出按钮样式 */
.fullscreen-exit-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2001;
}

.fullscreen-exit-btn :deep(.arco-btn) {
  padding: 4px 12px;
  background-color: var(--color-bg-2);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.fullscreen-exit-btn :deep(.arco-btn:hover) {
  background-color: var(--color-fill-2);
}

/* 备注内容样式 */
.remark-content {
  padding: 16px;
  line-height: 1.6;
  color: var(--color-text-1);
  background-color: var(--color-bg-1);
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

/* 备注容器样式 */
.remark-wrapper {
  position: relative;
}

/* 备注全屏样式 */
.remark-wrapper.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2000;
  background-color: var(--color-bg-1);
  padding: 32px;
}

.remark-wrapper.is-fullscreen .remark-content {
  height: 100%;
  max-height: none;
  border: none;
  padding: 0;
}

/* 备注内容的滚动条样式 */
.remark-content::-webkit-scrollbar {
  width: 6px;
}

.remark-content::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.remark-content::-webkit-scrollbar-track {
  background-color: var(--color-fill-1);
  border-radius: 3px;
}

/* 修改状态列表样式 */
.status-list {
  width: 200px;
  padding: 8px;
}

.status-item {
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px; /* 图标和文字的间距 */
}

/* 添加选中状态的样式 */
.status-item.is-active {
  background-color: var(--color-fill-2);
  cursor: default; /* 当前选中项不显示手型光标 */
}

.status-item:hover {
  background-color: var(--color-fill-2);
}

.status-item:active {
  background-color: var(--color-fill-3);
}

/* 添加成员列表样式 */
.member-list {
  padding: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.member-info-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.member-name {
  font-size: 13px;
  color: var(--color-text-1);
}

.member-item.is-selected {
  background-color: var(--color-primary-light-1);
}

.member-item:hover {
  background-color: var(--color-fill-2);
}

.member-item.is-selected:hover {
  background-color: var(--color-primary-light-2);
}

/* 选中图标样式 */
.member-item :deep(.arco-icon-check) {
  color: var(--color-primary);
  font-size: 14px;
}

.member-username {
  font-size: 12px;
  color: var(--color-text-3);
}

/* 添加日期选择器容器样式 */
.date-picker-container {
  padding: 8px;
}

/* 添加到现有的样式部分 */
.time-hint {
  font-size: 12px;
  margin-left: 4px;
}

/* 添加关联信息样式 */
.task-relations {
  margin: 16px 0;
  padding: 16px;
  background-color: var(--color-fill-1);
  border-radius: 4px;
}

.relation-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.relation-label {
  font-size: 13px;
  color: var(--color-text-3);
}

/* 修改选择器样式 */
.relation-item :deep(.arco-select) {
  width: 100%;
}

.relation-item :deep(.arco-select-view) {
  background-color: var(--color-bg-2);
}

.relation-content {
  font-size: 14px;
  color: var(--color-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 添加标签页相关样式 */
.task-detail-tabs {
  margin-top: 16px;
}

:deep(.arco-tabs) {
  background-color: var(--color-bg-2);
  border-radius: 4px;
}

:deep(.arco-tabs-nav) {
  margin-bottom: 16px;
}

.attachments-container {
  min-height: 200px;
}

/* 修改附件面板部分 */
.attachments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 16px;
}

.attachments-count {
  font-size: 14px;
  color: var(--color-text-2);
}

.add-attachment-btn {
  color: var(--color-primary);
}

.add-attachment-btn:hover {
  color: var(--color-primary-hover);
}
.load-more {
  display: flex;
  justify-content: center;
  padding: 16px 0 0;
}

/* 修改表格相关样式 */
:deep(.arco-table-tr) {
  background-color: var(--color-bg-2);
  border-radius: 4px;
  margin-bottom: 8px;
  height: 56px; /* 限制行高 */
  max-height: 56px;
}

:deep(.arco-table-td) {
  border: none !important;
  padding: 8px 16px !important;
  white-space: nowrap; /* 防止内容换行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文件信息单元格样式 */
.file-info-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 200px;
  max-width: 100%;
  overflow: hidden;
}

.file-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.file-name-text {
  color: var(--color-text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  color: var(--color-text-3);
  font-size: 13px;
  white-space: nowrap;
}

/* 上传信息单元格样式 */
.upload-info-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 200px; /* 设置最小宽度 */
  overflow: hidden;
}

/* 表格容器样式 */
:deep(.arco-table-container) {
  overflow-x: auto;
  overflow-y: hidden;
}

/* 操作列样式 */
:deep(.arco-table-td:last-child) {
  position: sticky !important;
  right: 0;
  background-color: var(--color-bg-2);
  z-index: 2;
  box-shadow: -4px 0 8px rgba(0, 0, 0, 0.1);
}

/* 操作列悬浮样式 */
:deep(.arco-table-tr:hover .arco-table-td:last-child) {
  background-color: var(--color-fill-2);
}

/* 右侧标签页样式 */
.comment-col :deep(.arco-tabs) {
  height: 100%;
}

.comment-col :deep(.arco-tabs-content) {
  height: calc(100% - 44px);
  overflow: hidden;
}

.comment-col :deep(.arco-tab-pane) {
  height: 100%;
  position: relative;
}

/* 活动列表样式 */
.dynamics-section {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  position: relative;
}

.dynamics-list {
  flex: 1;
  overflow-y: auto;
  padding-left: 8px;
  padding-bottom: 140px;
  display: flex;
  flex-direction: column; /* 恢复正常排序 */
}

.dynamic-item {
  margin-bottom: 16px;
  padding: 12px;
  background-color: var(--color-fill-1);
  border-radius: 4px;
}
.dynamic-load-wrapper {
  flex: 3;
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  background-color: var(--color-bg-2);
  border-top: 1px solid var(--color-border);
  padding: 16px;
  z-index: 1; /* 确保输入框在上层 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.dynamic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.dynamic-content {
  color: var(--color-text-2);
  font-size: 14px;
}

.no-dynamics {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-3);
  height: 200px;
}

.toolbar-btn {
  padding: 4px !important;
  color: var(--color-text-3) !important;
}

.toolbar-btn:hover {
  color: var(--color-text-1) !important;
  background-color: var(--color-fill-2) !important;
}

/* 添加成员列表样式 */
.member-list-container {
  width: 280px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.member-list-header {
  padding: 8px;
  color: var(--color-text-2);
  font-size: 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.member-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.member-item:hover {
  background-color: var(--color-fill-2);
}

.member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.member-name {
  font-size: 14px;
  color: var(--color-text-1);
}

.member-username {
  font-size: 12px;
  color: var(--color-text-3);
}

/* 优化滚动条样式 */
.member-list-container::-webkit-scrollbar {
  width: 6px;
}

.member-list-container::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 3px;
}

.member-list-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.comment-files {
  margin-top: 8px;
  padding: 8px;
  background-color: var(--color-fill-1);
  border-radius: 4px;
  max-height: 120px; /* 约等于3个文件项的高度 */
  overflow-y: auto;
}

/* 优化滚动条样式 */
.comment-files::-webkit-scrollbar {
  width: 4px;
}

.comment-files::-webkit-scrollbar-thumb {
  background-color: var(--color-fill-3);
  border-radius: 2px;
}

.comment-files::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 调整文件项样式 */
.comment-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin-bottom: 4px;
  background-color: var(--color-bg-2);
  border-radius: 4px;
  height: 40px; /* 稍微增加高度以适应图片 */
}

.comment-file-item:last-child {
  margin-bottom: 0;
}

.file-icon {
  width: 24px; /* 设置固定宽度，与图片预览保持一致 */
  height: 24px;
  color: var(--color-text-3);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-name {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove-icon {
  color: var(--color-text-3);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.remove-icon:hover {
  color: var(--color-text-1);
}

/* 修改附件按钮部分 */
.upload-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.upload-tip {
  font-size: 12px;
  color: var(--color-text-3);
  white-space: nowrap;
}

/* 图片预览样式 */
.file-preview-image {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
}

/* 加载状态样式 */
.comment-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--color-text-3);
}

/* 没有更多数据提示样式 */
.no-more-comment {
  padding: 8px 0;
  color: var(--color-text-3);
  font-size: 13px;
}

/* 评论项样式 */
.comment-item {
  margin-bottom: 12px; /* 减小评论项之间的间距 */
  padding: 8px 12px; /* 减小内边距 */
  border-radius: 4px;
}

/* 评论布局 */
.comment-layout {
  display: flex;
  gap: 5px; /* 减小头像和内容的间距为5px */
}

/* 左侧头像区域 */
.comment-left {
  flex-shrink: 0;
  margin-left: 5px; /* 头像距离左侧边框5px */
}

/* 右侧内容区域 */
.comment-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px; /* 每一行内容之间的间距改为5px */
}

.sender-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-2);
}

.send-time {
  font-size: 12px;
  color: var(--color-text-3);
}

.delete-icon {
  font-size: 14px;
  color: var(--color-text-3);
  cursor: pointer;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.2s ease;
}

/* 鼠标悬浮在评论项上时显示删除图标 */
.comment-item:hover .delete-icon {
  opacity: 1;
}

.delete-icon:hover {
  color: var(--color-danger-light-4);
}

/* @用户列表样式 */
.at-users {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 5px 0; /* 上下间距改为5px */
}

.at-user-tag {
  background-color: var(--color-primary-light-1) !important;
  border: none !important;
  border-radius: 12px !important;
  color: var(--color-primary-dark-2) !important;
  padding: 2px 10px !important;
  font-size: 13px !important;
  cursor: default;
  transition: all 0.2s ease;
}

.at-user-tag:hover {
  background-color: var(--color-primary-light-2) !important;
}

/* 移除原来的 at-user 样式 */
.at-user {
  display: none;
}

/* 附件列表样式 */
.attachments-list {
  display: flex;
  flex-direction: column;
  gap: 5px; /* 附件之间的间距改为5px */
  margin: 5px 0; /* 上下间距改为5px */
}

.attachment-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  width: 100%;
}

/* 文件信息行样式 */
.file-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.file-icon {
  flex-shrink: 0;
  color: var(--color-text-3);
  font-size: 16px;
  margin-top: 2px;
}

.file-name {
  flex: 1;
  font-size: 13px;
  color: var(--color-text-2);
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
  padding-right: 8px;
}

.file-actions {
  flex-shrink: 0;
  display: flex;
  gap: 4px;
  margin-top: 2px;
}

/* 图片预览行样式 */
.image-preview-row {
  width: 100%;
  /* display: flex; */
  /* justify-content: flex-start; */
  padding-left: 28px; /* 与文件名对齐 */
}

.preview-image {
  width: 200px; /* 设置预览图片的宽度 */
  height: 150px; /* 设置预览图片的高度 */
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
}

/* Arco Image 组件的预览样式调整 */
:deep(.arco-image) {
  border-radius: 4px;
  overflow: hidden;
}

:deep(.arco-image:hover) {
  opacity: 0.9;
}

/* 修改优先级列表样式 */
.priority-list {
  width: 200px;
  padding: 8px;
}

.priority-item {
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px; /* 图标和文字的间距 */
}

/* 添加选中状态的样式 */
.priority-item.is-active {
  background-color: var(--color-fill-2);
  cursor: default; /* 当前选中项不显示手型光标 */
}

.priority-item:hover {
  background-color: var(--color-fill-2);
}

.priority-item:active {
  background-color: var(--color-fill-3);
}

/* 添加优先级相关样式 */
.priority-list {
  padding: 4px;
  min-width: 100px;
}

.priority-item {
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.2s;
}

.priority-item:hover {
  background-color: var(--color-fill-2);
}

.priority-item.is-active {
  background-color: var(--color-fill-3);
}
</style>
